<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/image/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太空射击游戏</title>
    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        h1 {
            margin-bottom: 20px;
            font-size: 2rem;
        }

        /* 游戏容器 */
        .game-container {
            position: relative;
            width: 90%;
            max-width: 800px;
            height: 70vh;
            border: 2px solid #61dafb;
            background-color: #000;
            overflow: hidden;
        }

        /* 玩家飞船 */
        .player {
            position: absolute;
            width: 50px;
            height: 50px;
            background: url('https://ts2.cn.mm.bing.net/th?id=OIP-C.Sg1raC5cjPk9RVm2LBiMZwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2') center/cover;
        }

        /* 子弹 */
        .bullet {
            position: absolute;
            width: 5px;
            height: 15px;
            background-color: #ff6f61;
        }

        /* 敌人 */
        .enemy {
            position: absolute;
            width: 40px;
            height: 40px;
            background: url('https://ts4.cn.mm.bing.net/th?id=OIP-C.aJYvI_aHJdb_AsTGc41CBAAAAA&w=176&h=127&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2') center/cover;
            border-radius: 50%;
        }

        /* 陨石 */
        .meteor {
            position: absolute;
            width: 30px;
            height: 30px;
            background: url('https://ts1.cn.mm.bing.net/th?id=OIP-C.ig0C5kwdtaV2otTUM-q5jQHaHa&w=249&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2') center/cover;
            border-radius: 50%;
        }

        /* 得分 */
        .score {
            margin-top: 20px;
            font-size: 24px;
        }

        /* 消息提示 */
        .message {
            margin-top: 20px;
            font-size: 24px;
            color: #ff6f61;
        }

        /* 手机端控制按钮 */
        .controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }

        .controls button {
            padding: 15px;
            font-size: 20px;
            background: #444;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 图片地址输入框 */
        .image-input {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .image-input input {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #61dafb;
            border-radius: 5px;
            background: #333;
            color: #fff;
        }

        .image-input button {
            padding: 10px;
            font-size: 16px;
            background: #61dafb;
            color: #000;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.5rem;
            }

            .game-container {
                height: 60vh;
            }

            .controls {
                display: flex;
            }
        }
    </style>
</head>
<body>
    <h1>太空射击游戏</h1>
    <div class="game-container" id="game-container">
        <!-- 玩家飞船 -->
        <div class="player" id="player"></div>
    </div>
    <div class="score">得分: <span id="score">0</span></div>
    <div class="message" id="message"></div>

    <!-- 图片地址输入框 -->
    <div class="image-input">
        <input type="text" id="enemy-image" placeholder="输入敌机图片地址">
        <input type="text" id="meteor-image" placeholder="输入陨石图片地址">
        <button onclick="updateImages()">更新图片</button>
    </div>

    <!-- 手机端控制按钮 -->
    <div class="controls">
        <button onmousedown="startMove('up')" onmouseup="stopMove()" ontouchstart="startMove('up')" ontouchend="stopMove()">↑</button>
        <button onmousedown="startMove('left')" onmouseup="stopMove()" ontouchstart="startMove('left')" ontouchend="stopMove()">←</button>
        <button onmousedown="startMove('right')" onmouseup="stopMove()" ontouchstart="startMove('right')" ontouchend="stopMove()">→</button>
        <button onmousedown="startMove('down')" onmouseup="stopMove()" ontouchstart="startMove('down')" ontouchend="stopMove()">↓</button>
        <button onclick="shootBullet()">射击</button>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const scoreDisplay = document.getElementById('score');
        const messageDisplay = document.getElementById('message');
        const enemyImageInput = document.getElementById('enemy-image');
        const meteorImageInput = document.getElementById('meteor-image');
        let score = 0;
        let gameActive = true;
        let moveDirection = null;
        let moveInterval = null;
        let canShoot = true;

        // 初始化玩家位置
        function initPlayerPosition() {
            const containerRect = gameContainer.getBoundingClientRect();
            player.style.top = `${containerRect.height / 2 - 25}px`;
            player.style.left = `${containerRect.width / 2 - 25}px`;
        }

        initPlayerPosition();

        // 开始移动
        function startMove(direction) {
            if (moveInterval) return; // 防止重复设置
            moveDirection = direction;
            moveInterval = setInterval(() => movePlayer(direction), 20);
        }

        // 停止移动
        function stopMove() {
            clearInterval(moveInterval);
            moveInterval = null;
        }

        // 移动玩家
        function movePlayer(direction) {
            if (!gameActive) return;

            let top = parseInt(player.style.top);
            let left = parseInt(player.style.left);

            switch (direction) {
                case 'up':
                    top -= 5;
                    break;
                case 'down':
                    top += 5;
                    break;
                case 'left':
                    left -= 5;
                    break;
                case 'right':
                    left += 5;
                    break;
            }

            // 限制玩家移动范围
            if (top < 0) top = 0;
            if (top > gameContainer.offsetHeight - 50) top = gameContainer.offsetHeight - 50;
            if (left < 0) left = 0;
            if (left > gameContainer.offsetWidth - 50) left = gameContainer.offsetWidth - 50;

            player.style.top = `${top}px`;
            player.style.left = `${left}px`;
        }

        // 发射子弹
        function shootBullet() {
            if (!gameActive || !canShoot) return;
            canShoot = false;

            const bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullet.style.top = `${parseInt(player.style.top)}px`;
            bullet.style.left = `${parseInt(player.style.left) + 22}px`;
            gameContainer.appendChild(bullet);

            // 子弹移动
            const bulletInterval = setInterval(() => {
                const bulletTop = parseInt(bullet.style.top);
                if (bulletTop < 0) {
                    clearInterval(bulletInterval);
                    gameContainer.removeChild(bullet);
                } else {
                    bullet.style.top = `${bulletTop - 10}px`;
                }

                // 检测子弹与敌人的碰撞
                const enemies = document.querySelectorAll('.enemy');
                for (const enemy of enemies) {
                    if (checkCollision(bullet, enemy)) {
                        clearInterval(bulletInterval);
                        gameContainer.removeChild(bullet);
                        gameContainer.removeChild(enemy);
                        score += 10;
                        scoreDisplay.textContent = score;
                    }
                }
            }, 20);

            // 冷却时间
            setTimeout(() => {
                canShoot = true;
            }, 200);
        }

        // 检测碰撞
        function checkCollision(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();
            return !(
                rect1.top > rect2.bottom ||
                rect1.bottom < rect2.top ||
                rect1.left > rect2.right ||
                rect1.right < rect2.left
            );
        }

        // 生成敌人
        function createEnemy() {
            if (!gameActive) return;

            const enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.top = '0px';
            enemy.style.left = `${Math.random() * (gameContainer.offsetWidth - 40)}px`;
            gameContainer.appendChild(enemy);

            // 敌人移动
            const enemyInterval = setInterval(() => {
                const enemyTop = parseInt(enemy.style.top);
                if (enemyTop > gameContainer.offsetHeight) {
                    clearInterval(enemyInterval);
                    gameContainer.removeChild(enemy);
                } else {
                    enemy.style.top = `${enemyTop + 5}px`;
                }

                // 检测敌人与玩家的碰撞
                if (checkCollision(player, enemy)) {
                    clearInterval(enemyInterval);
                    gameActive = false;
                    messageDisplay.textContent = `游戏结束！你的得分是 ${score} 分。`;
                }
            }, 50);

            // 动态调整生成频率
            setTimeout(createEnemy, Math.max(1000, 2000 - score * 10));
        }

        // 生成陨石
        function createMeteor() {
            if (!gameActive) return;

            const meteor = document.createElement('div');
            meteor.classList.add('meteor');
            meteor.style.top = '0px';
            meteor.style.left = `${Math.random() * (gameContainer.offsetWidth - 30)}px`;
            gameContainer.appendChild(meteor);

            // 陨石移动
            const meteorInterval = setInterval(() => {
                const meteorTop = parseInt(meteor.style.top);
                if (meteorTop > gameContainer.offsetHeight) {
                    clearInterval(meteorInterval);
                    gameContainer.removeChild(meteor);
                } else {
                    meteor.style.top = `${meteorTop + 5}px`;
                }

                // 检测陨石与玩家的碰撞
                if (checkCollision(player, meteor)) {
                    clearInterval(meteorInterval);
                    gameActive = false;
                    messageDisplay.textContent = `游戏结束！你的得分是 ${score} 分。`;
                }
            }, 50);

            // 动态调整生成频率
            setTimeout(createMeteor, Math.max(500, 1000 - score * 5));
        }

        // 更新图片
        function updateImages() {
            const enemyImage = enemyImageInput.value;
            const meteorImage = meteorImageInput.value;

            if (enemyImage) {
                document.querySelectorAll('.enemy').forEach(enemy => {
                    enemy.style.backgroundImage = `url('${enemyImage}')`;
                });
            }

            if (meteorImage) {
                document.querySelectorAll('.meteor').forEach(meteor => {
                    meteor.style.backgroundImage = `url('${meteorImage}')`;
                });
            }
        }

        // 键盘事件监听
        document.addEventListener('keydown', (e) => {
            if (!gameActive) return;

            switch (e.key) {
                case 'ArrowUp':
                    startMove('up');
                    break;
                case 'ArrowDown':
                    startMove('down');
                    break;
                case 'ArrowLeft':
                    startMove('left');
                    break;
                case 'ArrowRight':
                    startMove('right');
                    break;
                case ' ':
                    shootBullet();
                    break;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                stopMove();
            }
        });

        // 启动游戏
        createEnemy();
        createMeteor();
    </script>
</body>
</html>